<template>
  <section>
    <h1>Currency Converter</h1>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="实时汇率"
      placement="top-start"
    >
      <p>Live Exchange Rates</p>
    </el-tooltip>

    <div class="line"></div>
    <p>Choose the currency and the amounts to get the exchange rate</p>
    <div class="container">
      <div class="currency">
        <el-select
          v-model="currencyOne"
          placeholder="请选择"
          style="width: 75px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-input-number
          class="ipt"
          controls-position="right"
          v-model="amountOne"
        >
          <template #decrease-icon>
            <el-icon>
              <Minus />
            </el-icon>
          </template>
          <template #increase-icon>
            <el-icon>
              <Plus />
            </el-icon>
          </template>
        </el-input-number>
      </div>
      <div class="swap-rate-container">
        <ElButton class="btn" type="primary" @click="swapCurrency"
          >swap</ElButton
        >
        <div class="rate">{{ state.rateStr }}</div>
      </div>
      <div class="currency">
        <el-select
          v-model="currencyTwo"
          placeholder="请选择"
          style="width: 75px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input-number
          class="ipt"
          controls-position="right"
          v-model="state.amountTwo"
        >
          <template #decrease-icon>
            <el-icon>
              <Minus />
            </el-icon>
          </template>
          <template #increase-icon>
            <el-icon>
              <Plus />
            </el-icon>
          </template>
        </el-input-number>
      </div>
      <div
        class="out"
        v-if="
          currencyOne === 'CNY' && currencyTwo === 'USD' && amountOne >= 10000
        "
      >
        <span
          >Tax deduction in US dollars is
          <strong>{{ Math.round(state.amountTwo / 1170) }}</strong>
          K.
        </span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
// 模块引入
import { reactive, watch, ref } from 'vue'
import {
  Air,
  // DryBulbTemperature,
  WetBulbTemperature,
  // DewPointTemperature,
  // RelativeHumidity,
  Moistrue
  // Enthalpy
} from '~/air/src'
defineOptions({
  // 组件名称
  name: 'currencyConverter',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
const currencyOne = ref<string>('CNY')
const currencyTwo = ref<string>('USD')
const amountOne = ref<number>(10000)

// const t = new DryBulbTemperature(35.1)
// const d = new Moistrue(0.02)
const tw = new WetBulbTemperature(28)
// const rh = new RelativeHumidity(50)
// const td = new DewPointTemperature(25)
const d = new Moistrue(0.02)
const air = new Air(tw, d)
console.log(air)
console.log(Air.densityFromAltitude(1000))

const state = reactive<{
  amountTwo: number
  rateStr: string
}>({
  amountTwo: 0,
  rateStr: ''
})
const list = [
  'AED',
  'ARS',
  'AUD',
  'BGN',
  'BRL',
  'BSD',
  'CAD',
  'CHF',
  'CLP',
  'CNY',
  'COP',
  'CZK',
  'DKK',
  'DOP',
  'EGP',
  'EUR',
  'FJD',
  'GBP',
  'GTQ',
  'HKD',
  'HRK',
  'HUF',
  'IDR',
  'ILS',
  'INR',
  'ISK',
  'JPY',
  'KRW',
  'KZT',
  'MVR',
  'MXN',
  'MYR',
  'NOK',
  'NZD',
  'PAB',
  'PEN',
  'PHP',
  'PKR',
  'PLN',
  'PYG',
  'RON',
  'RUB',
  'SAR',
  'SEK',
  'SGD',
  'THB',
  'TRY',
  'TWD',
  'TZS',
  'UAH',
  'USD',
  'UYU',
  'VND',
  'ZAR'
]
const options = list.map((item) => ({ value: item, label: item }))

watch(
  [currencyOne, currencyTwo, amountOne],
  ([currencyOne, currencyTwo, amountOne]) => {
    // console.log(currencyOne, currencyTwo, amountOne)

    fetch(`https://api.exchangerate-api.com/v4/latest/${currencyOne}`)
      .then((res) => {
        return res.json()
      })
      .then((data) => {
        const rate = data.rates[currencyTwo]
        state.rateStr = `1 ${currencyOne} = ${rate} ${currencyTwo}`
        state.amountTwo = Math.round(amountOne * rate)
      })
  },
  {
    immediate: true
  }
)

const swapCurrency = () => {
  const temp = currencyOne.value
  currencyOne.value = currencyTwo.value
  currencyTwo.value = temp
}
</script>

<style scoped lang="scss">
section {
  font-family: Arial, Helvetica, sans-serif;
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  h1 {
    color: #2baff7;
    font-size: 50px;
    text-align: center;
    padding: 30px 0;
  }
  p {
    text-align: center;
    font-size: 20px;
    padding: 10px 0;
  }
  .line {
    border: none;
    border-bottom: 3px solid #2baff7;
    width: 20%;
    margin: auto;
  }
  .container {
    width: 30%;
    margin: 0 auto;
    padding: 10px;
    .currency {
      padding: 40px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      input {
        border: 0;
        background: transparent;
        font-size: 30px;
        text-align: right;
        width: 200px;
      }
      select {
        width: 75px;
        padding: 5px;
        border: 2px solid #2baff7;
        border-radius: 5px;
      }
    }
    .swap-rate-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .rate {
        font-size: 20px;
        padding-right: 12px;
        color: #2baff7;
      }
    }
    .out {
      margin-left: 20px;
      strong {
        font-size: 20px;
        color: #2baff7;
      }
    }
  }
}
// .btn {
//   color: #fff;
//   background: #2baff7;
//   cursor: pointer;
//   border-radius: 5px;
//   padding: 5px 12px;
//   font-size: 20px;
//   border: #5fbaa7;
//   text-transform: lowercase;
// }
</style>
